import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Dimensions,
} from 'react-native';
import Colors from '../utils/Colors';
import PatIcon from './base/PatIcon';
import {useNavigation} from '@react-navigation/native';
const windowWidth = Dimensions.get('window').width;
const Header = props => {
  const {padding} = props;
  const count = 11;
  const style = StyleSheet.create({
    header: {
      width: '100%',
      paddingTop: padding,
      display: 'flex',
      backgroundColor: Colors.white,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      borderBottomColor: 'rgba(0,0,0,0)',
      height: padding + 34,
      borderColor: '#f40',
    },
    searchBox: {
      marginTop: 1,
      marginLeft: 10,
      height: 25,
      borderRadius: 17,
      paddingLeft: 10,
      paddingRight: 10,
      backgroundColor: Colors.patBGGray,
      width: windowWidth * 0.8,
      display: 'flex',
      borderColor: '#ddd',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
    },
    search: {
      color: Colors.patFontGray2,
      fontSize: 14,
      marginLeft: 10,
    },
    cart: {
      width: 30,
      height: 25,
      marginRight: 10,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
    },
    count: {
      position: 'absolute',
      width: 18,
      height: 18,
      fontSize: 12,
      backgroundColor: Colors.patFontRed,
      color: Colors.white,
      borderRadius: 50,
      top: -5,
      right: -5,
      textAlign: 'center',
    },
  });
  const navigation = useNavigation();
  const goCart = useCallback(() => {
    console.log('去购物车');
    navigation.navigate('about');
  }, [navigation]);
  const goSearch = useCallback(() => {
    console.log('去搜索页');
    navigation.navigate('about');
  }, [navigation]);
  return (
    <View style={style.header}>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={goSearch}>
        <View style={style.searchBox}>
          <PatIcon name="search2" size={14} color={Colors.patFontGray2} />
          <Text style={style.search}>搜索</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight onPress={goCart}>
        <View style={style.cart}>
          <PatIcon name="shopping-bag" size={23} color={Colors.patFontGray} />
          {count > 0 ? <Text style={style.count}>{count}</Text> : null}
        </View>
      </TouchableHighlight>
    </View>
  );
};

export default memo(Header);
